<!DOCTYPE html>
<html class="csstransforms csstransforms3d csstransitions" lang="en-US"><!--<![endif]-->
    <head>
        <link rel="icon" href="data:,">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="UTF-8">
        @* 360极速模式*@
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="author" content="VGsoft Team">
        <title></title>

        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-4.6.0/dist/css/bootstrap.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("font-awesome-4.7.0/css/font-awesome.min.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-table-master/bootstrap-table.css") ">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("config/main.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-advanced-sortable/css/bootstrap-advanced-sortable.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("bootstrap-sweetalert-master/dist/sweetalert.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">


        <script src="@routes.Assets.versioned("config/jquery-3.1.1.min.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-4.6.0/dist/js/bootstrap.bundle.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-table-master/bootstrap-table.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-table-master/extensions/export/bootstrap-table-export.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-table-master/extensions/export/tableExport.min.js")" type ="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-advanced-sortable/js/bootstrap-advanced-sortable-en.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("bootstrap-sweetalert-master/dist/sweetalert.min.js")" type="text/javascript"></script>


<body style="background-color: white">

    <div class="container">



      <div class="main-body">
        @components.scrollComponents("Table S1 Relative concentration and fold changes of major metabolites in roots of NI control (A) and NI six days after alkali treatment (A1)" ) {
       <div style="width: 100%">

          <table id="table1" data-pagination="true" data-advanced-sortable="true"
          data-page-list="[10]"  >

          </table>
       </div>

        }

        @components.scrollComponents("Table S2 Relative concentration and fold changes of major metabolites in roots of RI control (B) and RI six days after alkali stress (B1)" ) {
          <div style="width: 100%">

          <table id="table2" data-pagination="true" data-advanced-sortable="true"
          data-page-list="[10]"  >
          </table>
          </div>
            }

        @components.scrollComponents("Table S3 Relative concentration and fold changes of major metabolites in roots of NI control (A) and RI control (B)" ) {
          <div style="width: 100%">
          <table id="table3" data-pagination="true" data-advanced-sortable="true"
          data-page-list="[10]"  >

          </table></div>
        }

        @components.scrollComponents("Table S4 Relative concentration and fold changes of major metabolites in roots of NI six days after alkali treatment (A1) and RI six days after alkali stress (B1) " ) {
          <div style="width: 100%">
          <table id="table4" data-pagination="true" data-advanced-sortable="true"
          data-page-list="[10]"  >

          </table></div>
        }

      </div>
    </div>



</body>
    <script src="@routes.Assets.versioned("layer-v3.0/layer/layer.js")" type="text/javascript"></script>
    <script src="@routes.Assets.versioned("config/config.js")" type="text/javascript"></script>

    <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>


    <script>

          $(function (){
              $.post("@routes.MetaController.getRiNiAlkData()",(data)=>{

                  $.each(data,(i,v)=>{
                      let columns = []
                      $.each(v.header,(i1,v1)=>{
                          columns.push(
                                  {
                                      field:`${i1}`,
                                      title:v1
                                  }
                          )
                      })

                      $("#table" + i).bootstrapTable({
                          data:v.data,
                          columns:columns
                      })
                  })



              })

          })




  </script>
</html>



